<template>
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="p-5 border-b border-neutral-medium/30 flex justify-between items-center">
            <h3 class="font-semibold">参考案例</h3>
            <button class="text-primary text-sm hover:underline">查看更多</button>
        </div>

        <div class="p-5">
            <div class="space-y-4">
                <div v-for="(caseItem, index) in caseItems" :key="index"
                    class="border border-neutral-medium/30 rounded-lg p-3 hover:border-primary/50 transition-colors">
                    <div class="flex justify-between items-start">
                        <div>
                            <h4 class="text-sm font-medium">{{ caseItem.title }}</h4>
                            <p class="text-xs text-neutral mt-1">裁决日期：{{ caseItem.date }}</p>
                        </div>
                        <span class="px-2 py-0.5 bg-success/10 text-success text-xs rounded-full">已裁决</span>
                    </div>
                    <p class="text-sm text-neutral mt-2 line-clamp-2">
                        {{ caseItem.description }}
                    </p>
                    <button class="text-primary text-xs mt-2 hover:underline">查看详情</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
interface CaseItem {
    title: string
    date: string
    description: string
}

const caseItems: CaseItem[] = [
    {
        title: '服务质量争议案件（CASE-20230415-028）',
        date: '2023-04-22',
        description: '本案涉及服务质量争议，处理人员根据双方提供的服务合同和服务记录，裁定服务提供方未按合同约定提供服务，需退还部分服务费用并进行补偿。'
    },
    {
        title: '产品质量争议案件（CASE-20230408-015）',
        date: '2023-04-15',
        description: '本案涉及产品质量问题，经专业鉴定确认产品存在质量缺陷，裁定销售方需为申请人办理退货退款，并承担相关鉴定费用。'
    },
    {
        title: '合同纠纷案件（CASE-20230325-007）',
        date: '2023-04-05',
        description: '本案为合同履行纠纷，根据合同条款和双方履约记录，裁定双方均存在一定违约行为，最终达成部分履行和补偿方案。'
    }
]
</script>
